<template>
  <div class="slide-module-page" :class="{ 'slide-marginb': isMobile }">
    <div v-if="isSaving" :class="{ 'padding-horizontal': pageData.status === 2 }">
      <img
        class="static-image"
        :class="{ 'border-radius8': pageData.status === 2 }"
        :src="pageData.list[0].imageUrl"
      />
    </div>
    <van-swipe v-if="!isSaving" :autoplay="5000" @change="onChange">
      <van-swipe-item v-for="(item, index) in pageData.list" :key="index">
        <div :class="{ 'padding-horizontal': pageData.status === 2 }">
          <img
            class="static-image"
            :class="{ 'border-radius8': pageData.status === 2 }"
            :src="item.imageUrl"
            @click="openWindow(item, index)"
            @load="loadImage(item, index)"
          />
        </div>
      </van-swipe-item>
      <div
        v-if="pageData.list.length > 1"
        class="custom-indicator"
        slot="indicator"
      >
        <span
          v-for="(item, index) in pageData.list"
          :key="index"
          class="indicator-item"
          :class="{ active: index === current }"
        ></span>
      </div>
    </van-swipe>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { Swipe, SwipeItem } from 'vant'
import tool from '@/util/tool'
export default {
  name: 'SlideModule',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  props: {
    activityCode: {
      type: String,
      default: ''
    },
    componentId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      current: 0,
      isMobile: false
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent', 'isSaving']),
    pageData () {
      let model = this.pageContent.componentList.find(
        item => item._id === this.componentId
      )
      return model
    }
  },
  mounted () {
    this.$sendQdas('8888110701', {
      item_name: '轮播组件-加载成功'
    })
    this.isMobile = tool.isMobile()
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    loadImage (item, index) {
      this.$sendQdas('8888110703', {
        item_id: item._id,
        item_name: '轮播组件-图片加载成功',
        extra1: item.imageUrl,
        index: index
      })
    },
    onChange (index) {
      this.current = index
    },
    openWindow (item, index) {
      this.$sendQdas('8888110702', {
        item_id: item && item.id,
        item_name: '轮播组件-点击',
        extra1: item && item.linkUrl,
        extra2: item && item.imageUrl,
        index: index
      })
      if (item.linkUrl !== '') {
        // if (tool.isProductDetailPage(item.linkUrl)) {
        //   let spuNo = tool.getSpuNoFromLink(item.linkUrl)
        //   tool.navigateToProductDetail({ spuNo: spuNo })
        // } else {
        tool.navigateTo(item.linkUrl)
        // }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.slide-module-page {
  &.slide-marginb {
    margin-bottom: -7px;
  }
  .static-image {
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
  .indicator-item {
    display: inline-block;
    width: 8px;
    height: 3px;
    margin-left: 3px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    opacity: 0.2;
  }
  .active {
    opacity: 0.8;
  }
  .padding-horizontal {
    padding: 0 0.16rem;
  }
  .border-radius8 {
    border-radius: 8px;
  }
}
</style>
